import { useState } from 'react';
import { Table, Transfer, TransferProps } from 'antd';

type Record = {
	key?: string;
	title?: string;
	description?: string;
	disabled?: boolean;
} & ITbfduser;

type TableTransferProps = Omit<TransferProps<Record>, 'dataSource' | 'selectedKeys' | 'onSelectChange'> & {
	data: ITbfduser[];
};

export default function TableTransfer({ data, ...restProps }: TableTransferProps) {
	const [leftselected, setleftselected] = useState([] as string[]);
	const [rightselected, setrightselected] = useState([] as string[]);
	const dataSource = data.map((it) => {
		return {
			...it,
			key: it.userid,
			title: it.name,
			description: it.userid
		} as Record;
	});
	return <Transfer
		dataSource={dataSource}
		titles={['未选择', '已选择']}
		locale={{
			searchPlaceholder: '请输入搜索内容',
			itemUnit: '项',
			itemsUnit: '项',
			remove: '删除',
			selectCurrent: '全选当页',
			removeCurrent: '删除当页',
			selectAll: '全选所有',
			removeAll: '删除全部',
			selectInvert: '反选当页'
		}}
		showSearch
		filterOption={(inputValue, item) =>
			item.title.indexOf(inputValue) !== -1 || item.key.indexOf(inputValue) !== -1
		}
		{...restProps}>
		{({
			direction,
			filteredItems,
			onItemSelectAll,
			onItemSelect,
			selectedKeys: listSelectedKeys,
			disabled: listDisabled,
		}) => {
			return (
				<Table
					rowKey={(r) => {
						return r.key;
					}}
					rowSelection={{
						getCheckboxProps(item) {
							return {
								disabled: listDisabled || item.disabled
							};
						},
						onSelectAll(selected, selectedRows) {
							const dataSource = selectedRows.map((it) => {
								return it.key;
							});
							onItemSelectAll(dataSource, selected);
						},
						onSelect({ key }, selected) {
							onItemSelect(key, selected);
						},
						selectedRowKeys: listSelectedKeys,
					}}
					dataSource={filteredItems}
					size="small"
					style={{ pointerEvents: listDisabled ? 'none' : null }}
					onRow={({ key, disabled: itemDisabled }) => ({
						onClick: () => {
							if (itemDisabled || listDisabled) return;
							onItemSelect(key, !listSelectedKeys.includes(key));
						},
					})}
				>
					<Table.Column<ITbfduser> title='用户名' key='userid' dataIndex='userid' align='center' />
					<Table.Column<ITbfduser> title='姓名' key='name' dataIndex='name' align='center' />
				</Table>
			);
		}}
	</Transfer >;
}
